// 引入vue
import Vue from 'vue';
// 引入路由
import VueRouter from 'vue-router';

// 引入路由组件
import About from '../views/About.vue';
import Home from '../views/Home.vue'
import Center from '../views/Center.vue';
import AboutOne from '../views/AboutOne.vue';
import AboutTwo from '../views/AboutTwo.vue';
import HomeOne from '../views/home/HomeOne.vue';
import HomeTwo from '../views/home/HomeTwo.vue';

// 声明使用vue插件
Vue.use(VueRouter);

export default new VueRouter({
    mode:"history",//mode 模式分为两种 一种是history模式 一种是hash模式  history模式中没有#  hash模式中有#
    // 在开发环境下两种模式都没有问题  但是在生产环境 history模式会有问题
    // 注册路由
    routes:[
        {
            path:'/about',// 路径左侧的/ 代表项目的根目录 不要加.  建议路径中不要出现大写字符
            name:'about',
            components:{//命名视图  在同级展示多个视图 用法在views文件夹中创建多个组件  在路由器中注册多个组件
                default:About,
                AboutOne,
                AboutTwo
            }
        },
        {
            path:'/home',
            name:'home',
            component:Home,
            children:[//嵌套路由
                {
                    path:'/home/homeone',//对于二级或者多级路由  路径问题  如果在路径前写 / 路径就要写全，如果不写/就写当前的 路径会自动拼写完整
                    component:HomeOne
                },
                {
                    path:'hometwo',
                    component:HomeTwo,
                    name:'hometwo'
                }
            ]
        },{
            path:'/center',
            name:'center',
            component:Center,
            alias:'zhongxin'//别名
        },{
            /* 打开页面默认显示某个组件  路由重定向 */
            path:'/',
            // redirect:'/about'
            redirect:{
                name:'about'
            }
        }
    ]
})